import React,{Component} from 'react';
import Adaptive from '../../component/adaptive/Adaptive';
import Header from '../../system/header/Header';//<Header refName="health" childNodes="health-a"/>
import Footer from '../../component/footer/Footer';
import FooterMobile from '../../component/footer-mobile/FooterMobile';
import Loading from '../../component/loading/Loading';
import ajax from '../../component/httprequest/Request';
import url from '../../component/posturl/BaseUrl';
import ReactHtmlParser from 'react-html-parser';
import './details.less';
import qs from 'qs';
const prefix = 'details';
class Details extends Component{
    constructor(props){
        super(props)
        this.state = {
            display:"block",
            content:"",
            prev:"",
            next:"",
            category:""
        }
    }
    loading = () =>{
        this.setState({
            display:"block"
        })
    }
    componentWillMount(){
        let search = window.location.search.match(/id=\d+/g);
        let id = search?search[0].replace('id=',''):null;
        let category = window.location.search.match(/category=\d+/g);
        let categoryId = category?category[0].replace('category=',''):null;
        let data = qs.stringify({"id":id, "category":categoryId});
        ajax.ajaxRequest(undefined,`${url}/official/getArticle/${id}`,data,this.loading)
            .then(res=>{
                let content = res.data.centre.content;
                let prev = res.data.next;
                let next = res.data.pre;
                this.setState({
                    display:"none",
                    content:ReactHtmlParser(content),
                    prev:prev,
                    next:next,
                    category:categoryId
                })
            })
            .catch(err=>{
                throw new Error(err);
            })
    };
    render(){
        let state = this.state;
        let referral = window.location.search.match(/type=\w+/g);//type属性存在的时候表示目标文章属于梅奥转诊栏目下的
        return(
            <div className={prefix}>
                <Header refName={referral?'custom':"health"} childNodes={referral?'custom-a':"health-a"} imgUrl={referral?require('../img/example.jpg'):require('../img/advisory.jpg')}/>
                <div className={prefix+'-content'}>
                    <Loading style={{display:state.display}}/>
                    {state.content}
                    <div className={prefix+"-foot clearfix"}>
                        <span className={prefix+"-pre"}>
                            上一篇：
                            <a href={state.prev?(referral?`?id=${state.prev.id}&type=${referral}&category=${state.category}`:`?id=${state.prev.id}&category=${state.category}`):'javascript:void(0);'}>
                                {state.prev?state.prev.title:"无"}
                            </a>
                        </span>
                        <span className={prefix+"-next"}>
                            下一篇：
                            <a href={state.next?(referral?`?id=${state.next.id}&type=${referral}&category=${state.category}`:`?id=${state.next.id}&category=${state.category}`):'javascript:void(0);'}>
                                {state.next?state.next.title:"无"}
                            </a>
                        </span>
                    </div>
                </div>
                <Adaptive desktop={<Footer/>} phone={<FooterMobile/>} size={1200}/>
            </div>
        )
    }
};
export default Details;
